<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8"/>
	<title>遗物</title>
	<link th:href="@{css/index.css}" rel="stylesheet"/>
	<link th:href="@{css/fonts.css}" rel="stylesheet"/>
	<link th:href="@{css/rarityType.css}" rel="stylesheet"/>
</head>

<body>
<!-- 生成图片的宽度 -->
<w>3072</w>
<div>
	<div class="card">
		<div class="relics-backcolor">
			<div th:if="${relics != null and not relics.isEmpty()}">
				<table class="table-css syndicate relics-color"
					   th:with="colSize=4,
							   rowSize=${relics.size()/colSize},
							   rowSize=${(relics.size()%colSize==0 ? rowSize : rowSize+1)}">
					<tr th:each="rowIdx: ${#numbers.sequence(0, rowSize-1)}">
						<td th:each="colIdx: ${#numbers.sequence(0, colSize-1)}"
							th:with="idx=${rowIdx * colSize + colIdx}">
							<th:block th:if="${idx lt relics.size()}">
								<table class="relics" th:object="${relics[idx]}">
									<caption about="top"
											 th:text=" '[' +  *{name} + ']'">
									</caption>
									<tr th:each="reward: *{relicRewards}">
										<td th:class="${reward.rarity.name()}"
											th:text="${reward.rewardName} + ' (' + ${reward.rarity.name} + ')'">
										</td>
									</tr>
								</table>
							</th:block>
						</td>
					</tr>
				</table>
			</div>
			<div th:if="${relics == null or relics.isEmpty()}" class="no-data">
				没有找到相关遗物数据
			</div>
		</div>
	</div>
</div>

</body>
</html>
